
<template>
  <view class="fav-list-container">
    <!-- Tab导航 -->
    <view class="tab-header">
      <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-item', { active: activeTab === index, designer: index === 3, material: index === 4 }]"
          @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <scroll-view
          v-for="(tab, index) in tabs"
          :key="index"
          v-show="activeTab === index"
          class="scroll-content"
          scroll-y
      >
        <view
            v-for="(item, idx) in favData[index]"
            :key="idx"
            class="fav-item"
        >
          <!-- 普通收藏项（案例、攻略、知识） -->
          <template v-if="activeTab < 3">
            <image
                :src="item.image"
                class="item-image"
                mode="aspectFill"
            />
            <view class="item-info">
              <view class="item-title">{{ item.title }}</view>
              <view class="item-meta">
                <text class="creator">创建人: {{ item.creator }}</text>
                <text class="create-time">创建时间: {{ item.createTime }}</text>
              </view>
              <view class="fav-time">收藏时间: {{ item.favTime }}</view>
            </view>
          </template>

          <!-- 设计师收藏项 -->
          <template v-else-if="activeTab === 3">
            <image
                :src="item.image"
                class="item-image"
                mode="aspectFill"
            />
            <view class="item-info">
              <view class="item-title">{{ item.title }}</view>
              <view class="designer-meta">
                <text class="style">擅长风格: {{ item.style }}</text>
                <text class="store">所属门店: {{ item.store }}</text>
              </view>
              <view class="fav-time">收藏时间: {{ item.favTime }}</view>
            </view>
          </template>

          <!-- 材料收藏项 -->
          <template v-else-if="activeTab === 4">
            <image
                :src="item.image"
                class="item-image"
                mode="aspectFill"
            />
            <view class="item-info">
              <view class="item-title">{{ item.name }}</view>
              <view class="material-meta">
                <text class="price">价格: {{ item.price }}</text>
                <text class="spec">规格: {{ item.spec }}</text>
              </view>
              <view class="fav-time">收藏时间: {{ item.favTime }}</view>
            </view>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts">import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: "fav_list",
  setup() {
    // Tab标签
    const tabs = ref(['案例', '攻略', '知识', '设计师', '材料'])
    const activeTab = ref(0)

    // 模拟收藏数据
    const favData = ref([
      // 案例收藏数据
      [
        {
          image: '/static/images/case1.jpg',
          title: '高效沟通技巧案例分享',
          creator: '张三',
          createTime: '2023-10-01',
          favTime: '2023-10-15'
        },
        {
          image: '/static/images/case2.jpg',
          title: '项目管理实战案例',
          creator: '李四',
          createTime: '2023-09-20',
          favTime: '2023-10-10'
        }
      ],
      // 攻略收藏数据
      [
        {
          image: '/static/images/guide1.jpg',
          title: '新手入门完整攻略',
          creator: '王五',
          createTime: '2023-08-15',
          favTime: '2023-10-12'
        },
        {
          image: '/static/images/guide2.jpg',
          title: '高级技巧进阶攻略',
          creator: '赵六',
          createTime: '2023-07-22',
          favTime: '2023-10-05'
        }
      ],
      // 知识收藏数据
      [
        {
          image: '/static/images/knowledge1.jpg',
          title: '人工智能基础知识',
          creator: '孙七',
          createTime: '2023-09-05',
          favTime: '2023-10-18'
        },
        {
          image: '/static/images/knowledge2.jpg',
          title: '数据分析方法论',
          creator: '周八',
          createTime: '2023-08-30',
          favTime: '2023-10-08'
        }
      ],
      // 设计师收藏数据
      [
        {
          image: '/static/images/design1.jpg',
          title: '李明',
          style: '现代简约,北欧风格',
          store: '红星美凯龙旗舰店',
          favTime: '2023-10-20'
        },
        {
          image: '/static/images/design2.jpg',
          title: '王小丽',
          style: '新中式,轻奢风格',
          store: '居然之家设计中心',
          favTime: '2023-10-12'
        }
      ],
      // 材料收藏数据
      [
        {
          image: '/static/images/material1.jpg',
          name: '大理石瓷砖',
          price: '¥128/平方米',
          spec: '600x600mm, 厚度10mm',
          favTime: '2023-10-18'
        },
        {
          image: '/static/images/material2.jpg',
          name: '实木地板',
          price: '¥298/平方米',
          spec: '900x120x18mm, 橡木材质',
          favTime: '2023-10-15'
        }
      ]
    ])

    // 切换tab
    const switchTab = (index: number) => {
      activeTab.value = index
    }

    return {
      tabs,
      activeTab,
      favData,
      switchTab
    }
  }
})
</script>

<style scoped lang="scss">.fav-list-container {
  padding: 20rpx;
}

.tab-header {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;

  &.active {
    background-color: #ff0000;
    color: #fff;
    border-radius: 10rpx;
  }

  &.designer.active {
    background-color: #ff0000;
    color: #fff;
  }

  &.material.active {
    background-color: #ff0000;
    color: #fff;
  }
}

.scroll-content {
  max-height: calc(100vh - 200rpx);
}

.fav-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.item-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.item-meta {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;

  .creator {
    margin-bottom: 5rpx;
  }
}

.designer-meta {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;

  .style {
    margin-bottom: 5rpx;
  }
}

.material-meta {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;

  .price {
    margin-bottom: 5rpx;
    color: #ff6600;
    font-weight: bold;
  }
}

.fav-time {
  font-size: 24rpx;
  color: #ff002f;
}
</style>